<template>
    <div class="container">
      <!-- 左侧图片区域 -->
      <div class="image-upload">
        <img src="" alt="设备图片" id="uploadedImage">
        <label for="fileInput">
          <span>+</span>
          <p>添加照片</p>
        </label>
        <input type="file" id="fileInput" accept="image/*" style="display:none;" @change="handleFileChange">
      </div>
    
      <!-- 中间设备名称和右侧PDF上传区域 -->
      <div class="name-pdf-section">
        <!-- 中间设备名称区域 -->
        <div class="device-name">
          <input type="text" v-model="deviceName" placeholder="添加设备名称">
        </div>
    
        <!-- 右侧PDF上传区域 -->
        <div class="pdf-upload">
          <button @click="uploadPDF">点击上传PDF</button>
        </div>
      </div>
    
      <!-- 下部设备详情区域 -->
      <div class="device-details">
        <textarea v-model="deviceDetails" placeholder="请输入设备简介"></textarea>
      </div>
    
      <!-- 底部提交按钮 -->
      <div class="submit-button">
        <button @click="submitForm">上传</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        deviceName: '',
        deviceDetails: '',
        imageSrc: '' // 用于存储上传图片的src属性
      };
    },
    methods: {
      handleFileChange(event) {
        const file = event.target.files[0];
        if (!file.type.match('image.*')) {
          alert("只能选择图片文件");
          return;
        }
  
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageSrc = e.target.result;
          document.getElementById('uploadedImage').src = this.imageSrc;
        };
        reader.readAsDataURL(file);
      },
      uploadPDF() {
        // PDF上传逻辑
      },
      submitForm() {
        // 表单提交逻辑
      }
    }
  };
  </script>
  
  <style scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 80%; /* 可以根据需要调整宽度 */
    max-width: 600px;
    padding: 20px;
    background-color: #f5f5f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .image-upload {
    margin-bottom: 15px;
  }
  
  .image-upload img {
    max-width: 200px;
    max-height: 200px;
    border: 1px dashed #ddd;
    border-radius: 5px;
  }
  
  .image-upload label {
    text-align: center;
    font-size: 14px;
    color: #666;
  }
  
  .name-pdf-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
  }
  
  .device-name input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
  }
  
  .pdf-upload button {
    padding: 10px 30px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  
  .device-details textarea {
    width: 500px;
    height: 200px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    resize: vertical;
    margin-top: 15px;
  }
  
  .submit-button button {
    padding: 10px 50px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 15px;
  }
  /* 确保下部区域与上部区域对齐 */
.device-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  </style>
  